<template>
 <div class="container">
        <div class="btnClose">
            <span class="iconfont iconicon-test"></span>
        </div>
        <div class="logo">
            <span class="iconfont iconnew"></span>
        </div>
        <!-- 引用组件里面的input表单 -->
         <myinput
        type='text' 
        placeholder='用户名/手机号码'
        :rule='/^1[3456789]\d{9}$/'
        msg='请输入正确的手机号码'
        @valchange='setusername'
        ></myinput>
        <!-- 引用组件里面的第二个表单 -->
        <myinput 
        type='password' 
        placeholder='密码'
        msg='请输入正确的密码'
        @valchange='setpassword'
        :rule='/^\d{6}$/'
        ></myinput>
        <!-- 登录按钮的引用 -->
        <mybtn 
        btntext='登录'
        @clicked='login'>
        </mybtn>
    </div>
</template>

<script>
//从组件里面引出文本框和点击按钮框
import myinput from '../components/myinput'
import mybtn from '../components/mybtn'
export default {
    data(){
    return {
     username:'', //设定需要被赋值的变量 用户名
     password:'' //设定需要被赋值的变量 密码
    }
    },
    components:{
        //注册文本框和按钮框
        myinput,  //文本框
        mybtn //点击按钮
    },
    methods:{
        login(){ //给按钮注册点击事件 
            console.log(this.username);
            console.log(this.password);
              if (!this.username || !this.password) {
        this.$toast.fail("请输入完整的信息");
        return;
      }
      this.$axios({
          url:'/login',
          method:'post',
          data:{
              username:this.username,
              password:this.password
          }
      }).then((res)=>{
          console.log(res);
          localStorage.setItem('token',res.data.data.token)
          localStorage.setItem('userId',res.data.data.user.id)
          this.$toast.success(res.data.message);
          this.$router.push('/personal')

      })
            // this.$router.push('/personal')
        },
        setusername(data){
            // 因为在用户名的文本框中可以得到值，data代表的是获取到的值，并且将这个值赋给用户名这个变量
           this.username=data
        },

        setpassword(data){
            //在密码框的文本框可以得到值，data代表的是获取到的值，并且将所获取到的值赋值到 密码框的
            this.password=data
        }
    }
}
</script>

<style lang="less" scoped>
@import url('http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css');
.container {
    padding: 24/360*100vw;
}
.btnClose {
    .iconfont {
        font-size: 28/360*100vw;
    }
}
.logo {
    text-align: center;
    .iconfont {
        font-size: 126/360*100vw;
        color: #d81e06;
    }
}



</style>